<template>
    <div>
      <span>{{title}}</span>
      <el-card class="box-card">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="优惠券名称：" prop="couponName" >
          <el-input v-model="ruleForm.couponName"></el-input>
        </el-form-item>
        <el-form-item label="优惠券金额：" prop="couponMoney">
          <el-input v-model="ruleForm.couponMoney" class="money"></el-input>
        </el-form-item>
        <el-form-item label="使用金额限制：" prop="limitation">
          <el-input v-model="ruleForm.limitation" class="money"></el-input>
          <span>（不填写即为无使用金额限制）</span>
        </el-form-item>
        <el-form-item label="使用时限：" prop="timing">
          <el-input v-model="ruleForm.timing" class="money"></el-input>
          <span>（不填写即为无使用时限限制）</span>
        </el-form-item>
        <el-form-item label="帐号领取上限：" prop="astrict">
          <el-input v-model="ruleForm.astrict" class="money"></el-input>
          <span>（不填写即为无帐号领取上限限制）</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button @click="$router.back()">返回优惠券列表</el-button>
        </el-form-item>
      </el-form>
      </el-card>
    </div>
</template>

<script>
// 测试版
import { updateCouponLists, addCouponLists } from '@/api/coupon'
import { queryFn } from '@/utils'
export default {
  name: 'ShopsAddcoupon',

  data () {
    return {
      ruleForm: {
        couponName: '',
        couponMoney: '',
        limitation: '',
        timing: '',
        astrict: ''
      },
      rules: {
        couponName: [],
        couponMoney: [],
        limitation: [],
        timing: [],
        astrict: []
      }
    }
  },
  created () {
    this.selectFrom()
  },
  computed: {
    title () {
      let test = ''
      if (this.$route.query.row) {
        test = '编辑优惠券'
      } else {
        test = '新增优惠券'
      }
      return test
    }
  },
  methods: {
    selectFrom () {
      if (this.$route.query.row) {
        const data = this.$route.query.row
        this.ruleForm.couponName = data.couponName
        this.ruleForm.couponMoney = data.couponMoney
        this.ruleForm.limitation = data.limitation
        this.ruleForm.timing = data.timing
        this.ruleForm.astrict = data.astrict
      } else {
        this.resetFormList()
      }
    },
    submitForm () {
      if (this.$route.query.row) {
        this.updateCouponLists(this.$route.query.row.id)
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.resetFormList()
        this.$router.back()
      } else {
        this.addCouponLists()
        this.$message({
          message: '添加成功',
          type: 'success'
        })
        this.resetFormList()
        this.$router.back()
      }
    },
    async addCouponLists () {
      await addCouponLists({
        couponName: this.ruleForm.couponName,
        couponMoney: +this.ruleForm.couponMoney,
        limitation: this.ruleForm.limitation === '' ? '无' : this.ruleForm.limitation,
        timing: this.ruleForm.timing === '' ? '无' : this.ruleForm.timing,
        astrict: this.ruleForm.astrict === '' ? '无' : this.ruleForm.astrict,
        grantSum: 0,
        getMoney: 0,
        action: '',
        time: +new Date()
      })
    },
    async updateCouponLists (id) {
      const res = queryFn({
        id,
        couponName: this.ruleForm.couponName,
        couponMoney: this.ruleForm.couponMoney,
        limitation: this.ruleForm.limitation === '' ? '无' : this.ruleForm.limitation,
        timing: this.ruleForm.timing === '' ? '无' : this.ruleForm.timing,
        astrict: this.ruleForm.astrict === '' ? '无' : this.ruleForm.astrict
      })
      await updateCouponLists(res)
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    resetFormList () {
      this.ruleForm.couponName = ''
      this.ruleForm.couponMoney = ''
      this.ruleForm.limitation = ''
      this.ruleForm.timing = ''
      this.ruleForm.astrict = ''
    }
  }
}
</script>

<style lang="less" scoped>
.box-card {
    width: 40%;
    margin: 20px 0;
}
// /deep/.el-input__inner{
//     width: 410px;
// }
/deep/.money {
  width: 180px !important;
}
</style>
